
<style scoped lang="less">
.device-wrap{
	overflow: auto;
}
.device-list{
    padding-top: 10px;
    li{
        position: relative;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        color: #BFDFF7;
        margin: 5px 0;
        margin-left: 10px;
        cursor: pointer;
        .icon-play{
            position: absolute;
            left: 5px;
            top: 9px;
            font-size: 8px;
            display: none;
        }
        &.active{
            color: #00E7FF;
            .icon-play{
                display: inline;
                color: #00E7FF;
            }
        }
    }
}
</style>
<template>
	<div class="page-census page-setting">
		<div class="crumbs" v-if="siteInfos.userType==2">
			<router-link to="/">首页</router-link> / 消防档案 / 企业概览 / <span class="active">鹰眼e通</span>
		</div>
		<div class="crumbs" v-else>
			<router-link to="/">首页</router-link> / 一企一档 / <span class="active">{{businessName}}-鹰眼e通</span>
		</div>
        <el-container :style="{height: mainH+'px'}">
		  	<el-aside class="setting-nav-wrap" width="300px" style="padding: 20px">
		  		<!-- <div class="unit-search flex">
		  			<el-input class="flex-1" placeholder="搜索" v-model.trim="keyword"></el-input>
		  			<el-button type="primary" @click="searchUnit"><i class="iconfont icon-search"></i></el-button>
		  		</div> -->
                <h1 class="fs-16">监控设备列表</h1>
		  		<div class="device-wrap" :style="{height: (mainH-82)+'px'}">
		  			<ul class="device-list">
                        <li v-for="(item,index) in deviceList" :key="index"
                            :class="{active:item.isActive}"
                            @click="previewAction(item,index)">
                            <i class="iconfont icon-video"></i>
                            <i class="iconfont icon-play"></i>
                            {{item.name}}
                        </li>
                    </ul>
		  		</div>
		  	</el-aside>
		  	<el-main ref="rightBlk" class="setting-main">
               <div id="videoControl" class="video-control" :style="{width:videoWidth+'px',height: videoHeight+'px',margin:'0 auto'}"></div>
            </el-main>
        </el-container>
	</div>
</template>
<script>
import Handle from '@/components/HandleAlarm.vue'
import { mapState } from 'vuex'
export default {
	name: 'Notice',
	components:{
		Handle
	},
	props: {
		winH: {
			type: Number,
			default: 500
		}
	},
	// <!-- 1 电气火灾 2 消防用水 3 烟感 4 可燃气体 5 火灾自动联网 6 消防可视化 -->
	data () {
		return {
            keyword:'',
			businessId: this.$route.query.id,
			businessName:  this.$route.query.name,
            deviceList: [],
            videoWidth: 100,
            videoHeight: 100,
            currentWinId: 0,
            totalWin: 25
		}
	},
	computed: {
		...mapState([
			'siteInfos'
		]),
		mainH () {
			return this.winH-180
		},
	},
	watch: {
	},
	methods: {
		getData(){
			this.loading = true
			this.$get('/fireFightingIOT/device/deviceCameraList', {
                businessId: this.businessId
            }).then(res => {
            	this.loading = false
                this.deviceList = res.data.map(item=>{
                    item.isActive = false
                    return item
                })
            }, (err) =>{
            	this.loading = false
				if(err.msg){
					this.$message.error(err.msg);
				}
            })
		},
		searchAction () {
			// this.getData(1)
		},
		previewAction (item,index) {
			if(!oWebControl) return
            this.currentWinId ++
            this.currentWinId = Math.min(this.currentWinId,this.totalWin)
            this.startPreview(item.number,this.currentWinId)
            this.deviceList[index].isActive = true
        },
		startPreview (cameraIndexCode,winId) {
			var cameraIndexCode  = cameraIndexCode;     //获取输入的监控点编号值，必填
			var streamMode = 0;                                     
			//主子码流标识：0-主码流，1-子码流
			var transMode = 1;                                      //传输协议：0-UDP，1-TCP
			var gpuMode = 0;                                        //是否启用GPU硬解，0-不启用，1-启用
			var wndId = winId || -1;                                         //播放窗口序号（在2x2以上布局下可指定播放窗口）

			cameraIndexCode = cameraIndexCode.replace(/(^\s*)/g, "");
			cameraIndexCode = cameraIndexCode.replace(/(\s*$)/g, "");

			oWebControl.JS_RequestInterface({
				funcName: "startPreview",
				argument: JSON.stringify({
					cameraIndexCode:cameraIndexCode,                //监控点编号
					streamMode: streamMode,                         //主子码流标识
					transMode: transMode,                           //传输协议
					gpuMode: gpuMode,                               //是否开启GPU硬解
					wndId:wndId                                     //可指定播放窗口
				})
			})
		},
        initControl () {
            this.initVideoWebPlugin({
                containerId:'videoControl',
                width:this.videoWidth,
                height:this.videoHeight,
                layout: '5x5'
            },()=>{
                // this.startPreview(this.number)
            })
        }
	},
	created () {
		this.getData()
	},
	activated () {},
	mounted () {
        // console.log(this.$refs.rightBlk)
        // console.log(this.$refs.rightBlk.$el.clientWidth)
        // console.log(this.$refs.rightBlk.$el.clientHeight)
        this.videoWidth = this.$refs.rightBlk.$el.clientWidth
        this.videoHeight = this.$refs.rightBlk.$el.clientHeight-30
        this.initControl()
    },
	destroyed () {
		 if (oWebControl != null){
			oWebControl.JS_HideWnd();   // 先让窗口隐藏，规避可能的插件窗口滞后于浏览器消失问题 
            oWebControl.JS_Disconnect().then(function(){  // 断开与插件服务连接成功
			}, 
			function() {  // 断开与插件服务连接失败
			});
        }
	}
}
</script>
